<template>
    <div class="comment-input">

        <div class="comment-input-content-textarea">
            <!-- <textarea name="" id="" cols="30" rows="10" placeholder="回复某某某:"></textarea> -->
            <textarea ref="commentInputBlock" v-model="commentInput" cols="30" rows="10" :placeholder="placeholder"></textarea>
        </div>
        <div class="comment-input-content-btn">
            <!-- <button>回复</button> -->
            <SubmitButton @click="submitComment()" value="回复" color="#78e26c" />
        </div>
    </div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue';
import SubmitButton from '../RepackageComponent/SubmitButton.vue';
import { ElMessage } from "element-plus";
import store from '@/store';
import { PostComment } from '@/api/front/contest';

const emits = defineEmits(['submitComment'])

const props = defineProps({
    name: {
        type: String,
        default: ""
    }
})
const commentInput = ref('')
const commentInputBlock = ref(null)
const placeholder = computed(() => {
    if(props.name){
        const nickname = props.name
        return "回复" + nickname + "："
    }else {
        return "请输入内容："
    }
})
const submitComment = async () => {
    if (store.state.userInfo.userId == 0) {
        ElMessage({
            message: "请先登录",
            type: "error"
        });
        return;
    }
    if (commentInput.value === "") {
        ElMessage({
            message: "评论不能为空",
            type: "error",
        });
        return;
    }
    store.commit("setCommentProperty", { key: "content", value: commentInput.value });

    const data = store.state.comment
    console.log("comment-vuex",store.state.comment)
    const res = await PostComment(data);
    if (res.data == "添加成功") {
        commentInput.value = ''
        ElMessage({
            message: "评论成功",
            type: "success",
        });
        emits('submitComment','success')
    } else {
        ElMessage({
            message: "评论失败",
            type: "error",
        });
    }
};

const focus = () => {
    commentInputBlock.value.focus()
}

onMounted(() => {
    commentInputBlock.value.focus()
})

defineExpose({
    focus
})

</script>
<style scoped lang="scss">
.comment-input {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    background-color: #f5f5f5;
    padding: 0 10px;
    position: absolute;
    bottom: 0;

    .comment-input-content-textarea {
        width: 100%;
        height: 60px;

        textarea {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            resize: none;
            padding: 10px;
            font-size: 14px;
            color: #666;
            border-radius: 5px;

            &::placeholder {
                color: #999;
            }
        }
    }

    .comment-input-content-btn {
        width: 100px;
        height: 40px;
        margin: 10px;

        // button {
        //     width: 100%;
        //     height: 100%;
        //     border: none;
        //     outline: none;
        //     // background-color: #42b983;
        //     background-color: #78e26c;
        //     color: #fff;
        //     font-size: 14px;
        //     cursor: pointer;
        //     border-radius: 5px;
        // }
    }
}</style>